import React, { useState } from 'react';
import { Button, message } from 'antd';
import ProForm, {
    ModalForm,
    ProFormText,
    ProFormCascader,
    ProFormSelect,
    ProFormSwitch,
    ProFormTextArea,
    ProFormDependency,
    ProFormUploadDragger,
} from '@ant-design/pro-form';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';

import request from 'umi-request';

import { api } from '@/global';

type resultType = {
    fileDesc: string;
    fileName: string;
    fileown: string;
    filepathId: any[];
    isAutoName: boolean;
    fileDescribe: string;
    isCurrentUserInfo: boolean;
    file: any[];
};

export default (props: any) => {
    const [fileInfo, SetFileInfo] = useState();

    return (
        <ModalForm
            title="上传"
            trigger={<a>上传文件</a>}
            autoFocusFirstInput
            modalProps={{
                onCancel: () => console.log('run'),
            }}
            onFinish={async (r: resultType) => {
                // 判断是否有文件了
                if (!fileInfo) {
                    message.error('请选择文件');
                    return;
                }

                const fileDescribe = r.fileDescribe;
                const isAutoName = r.isAutoName == undefined ? false : r.isAutoName;

                let fileName;
                if (isAutoName) {
                    fileName = r.fileName;
                } else {
                    fileName = r.file[0].name;
                }

                const formData = new FormData();

                formData.append('fileDescribe', fileDescribe);
                formData.append('fileName', fileName);

                formData.append('file', fileInfo);

                const result = await request(api.uploadPrivateFile, {
                    method: 'post',

                    data: formData,
                });

                if (result.success) {
                    message.info('保存成功');
                    props?.reload()
                } else {
                    message.error('保存失败');
                }
                return true;
            }}
        >
            <ProForm.Group>
                <ProFormSwitch
                    width="sm"
                    name="isAutoName"
                    tooltip="是否使用文件原名称"
                    label="选中后可以自定义名称"
                    validateFirst={false}
                    fieldProps={{
                        checkedChildren: <CheckOutlined />,
                        unCheckedChildren: <CloseOutlined />,
                        defaultChecked: false,
                    }}
                />
                <ProFormDependency name={['isAutoName']}>
                    {({ isAutoName }) => {
                        return (
                            <ProFormText
                                width="md"
                                name="fileName"
                                label="文件名称"
                                disabled={isAutoName === undefined ? true : !isAutoName}
                                placeholder="请输入文件名称"
                            />
                        );
                    }}
                </ProFormDependency>
            </ProForm.Group>

            <ProForm.Group>
                <ProFormTextArea
                    width="lg"
                    name="fileDescribe"
                    label="文件描述"
                    placeholder="文件描述"
                    rules={[
                        {
                            required: true,
                            message: '请输入文件描述',
                        },
                    ]}
                />
            </ProForm.Group>
            <ProForm.Group>
                <ProFormUploadDragger
                    max={1}
                    width="xl"
                    label="选择文件"
                    name="file"
                    description="仅支持单次上传"
                    fieldProps={{
                        beforeUpload: (file) => {
                            SetFileInfo(file);
                            return false;
                        },
                    }}
                    rules={[
                        {
                            required: true,
                            message: '请选择文件夹',
                        },
                    ]}
                />
            </ProForm.Group>
        </ModalForm>
    );
};
